<template>
  <a-modal
    :title="title"
    :width="1040"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :footer="null"
    cancelText="关闭"
  >
    <div class="container">
      <div class="top">
        <p>
          月租编号：<span>{{ result.monthlyCode }}</span>
          <span :style="{ 'font-weight': '500', 'margin-left': '6px', color: monthlyStatusColor }">
            {{ monthlyStatusTranslate(result.monthlyStatus) }}</span
          >
        </p>
        <ul class="detailTop">
          <li>
            车主/姓名：<span>{{ result.carOwnerName }}</span>
          </li>
          <li>
            部门/组织：<span>{{ result.monthlyDepartmentName }}</span>
          </li>
          <li>
            住址/房号：<span>{{ result.address }}</span>
          </li>
          <li>
            月租套餐：<span>{{ result.packageName }}</span>
          </li>
          <li>
            通行权限：<span>{{ result.throughAuthorityName }}</span>
          </li>
          <li>
            手机号码：<span>{{ result.telephone }}</span>
          </li>
        </ul>
        <span class="explain">
          说明*：当前选择月租套餐为{{ result.packageName }}，每{{ result.cycleLength === 1 ? '天' : '月'
          }}{{ result.monthlyMoney }}元。允许添加{{ result.bindingSpaceNumber }}个车位{{
            result.bindingCarNumber
          }}个车牌。</span
        >
        <ul class="detailBottom">
          <li style="position: relative">
            车位编号：
            <span style="margin-right: 5px">{{ result.parkNumberNow }}</span>
            <!-- <a-popover v-if="result.parkNumberMore" title="车位编号" trigger="click">
              <template #content>
                {{ result.parkNumberMore }}
                  :simpleInfo="result.parkNumberNow"
              </template>
              <a href="javascript:;">更多</a> -->
            <list-park-number-popover
              v-if="result.parkNumberMore"
              style="position: absolute; right: 55px; top: -15px; margin: 0"
              placement="bottom"
              :detail="result.parkNumberMore"
              title="绑定车位信息"
              trigger="click"
              content="更多"
            />
            <!-- </a-popover> -->
          </li>
          <li style="position: relative">
            车牌号：<span style="margin-right: 5px">{{ result.plateNoNow }}</span>
            <!-- <a-popover v-if="result.plateNoMore" title="车牌号" trigger="click">
              <template #content>
                {{ result.plateNoMore }}
              </template>
              <a href="javascript:;">更多</a>
            </a-popover> -->
            <list-park-number-popover
              v-if="result.plateNoMore"
              style="position: absolute; right: 0px; top: -15px; margin: 0"
              placement="bottom"
              :detail="result.plateNoMore"
              title="绑定车牌号信息"
              trigger="click"
              content="更多"
            />
          </li>
          <li>
            起始时间：<span>{{ result.beginTime }}</span>
          </li>
          <li>
            到期时间：<span>{{ result.endTime }}</span>
          </li>
        </ul>
      </div>

      <a-form :form="form" style="margin-top: 20px" v-if="type == 1">
        <a-row>
          <a-col :span="8" style="margin-top: 10px">
            延期按{{ result.cycleLength == 1 ? '天' : '月' }}：
            <a-switch :checked="iSdisabledDate" @change="onChange" />
          </a-col>

          <a-col :span="8" v-show="iSdisabledDate">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="延期">
              <a-select @change="postponeMonthly" :options="postponeList" v-model="params.monthly"></a-select>
              <span style="position: absolute; margin-left: 5px">{{ result.cycleLength == 1 ? '天' : '月' }}</span>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row style="margin-top: 10px">
          <a-col :span="8">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="起始时间">
              <!-- v-decorator="[ 
                  'endTime', v-show="result.overdueDelayWay == 2 && !iSdisabledDate"
                  {
                    rules: [{ required: true, message: '请选择到期时间!' }],
                    initialValue: moment(result.beginTime, 'YYYY-MM-DD HH:mm:ss'),
                  },
                ]" -->
              <a-date-picker
                :disabled="
                  result.overdueDelayWay == 1 ||
                  (this.result.overdueDelayWay === 2 &&
                    this.result.endTime > moment(new Date()).format('YYYY-MM-DD HH:mm:ss'))
                "
                format="YYYY-MM-DD "
                v-decorator="[
                  'beginTime',
                  {
                    rules: [{ required: true, message: '请选择起始时间!' }, { validator: this.checkBeginTime }],
                    initialValue: moment(params.beginTime, 'YYYY-MM-DD '),
                  },
                ]"
                @openChange="handleStartOpenChange"
                @change="beginTimeTimeChange"
              />
              <!--              :disabled-date="disabledStartDate"-->
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="到期时间">
              <!--              :disabled-date="disabledEndDate"-->
              <a-date-picker
                :disabled="iSdisabledDate"
                format="YYYY-MM-DD "
                v-decorator="[
                  'endTime',
                  {
                    rules: [{ required: true, message: '请选择到期时间!' }],
                    initialValue: moment(params.endTime, 'YYYY-MM-DD '),
                  },
                ]"
                :open="endOpen"
                @openChange="handleEndOpenChange"
                @change="endTimeChange"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="金额">
              <a-input-number
                style="width: 130px"
                :min="0"
                :max="9999999.99"
                :precision="2"
                v-decorator="[
                  'monthlyMoney',
                  { rules: [{ required: true, message: '请输入金额' }], initialValue: result.monthlyMoney },
                ]"
              />
              <span style="position: absolute; margin-left: 5px">元</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注信息">
              <a-input placeholder="请输入备注信息" v-decorator="['remark', { initialValue: result.remark }]" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-form :form="form" style="margin-top: 20px" v-else-if="type == 2">
        <a-row>
          <a-col :span="8">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="金额">
              <a-input
                placeholder="请输入金额"
                v-decorator="['monthlyMoney', { initialValue: result.monthlyMoney }]"
              /><span style="position: absolute; margin-left: 5px">元</span>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              :labelCol="{ xs: { span: 8 }, sm: { span: 8 }, style: { textAlign: 'left' } }"
              :wrapperCol="{ xs: { span: 14 }, sm: { span: 14 }, style: { textAlign: 'left' } }"
              label="备注信息"
            >
              <a-input placeholder="请输入备注信息" v-decorator="['remark', { initialValue: result.remark }]" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-row style="margin-top: 20px">
        <a-col :span="4"
          ><a-button v-show="false" @click="close" style="width: 80px; height: 30px; font-size: 14px"
            >返回</a-button
          ></a-col
        >
        <a-col :span="8" align="center"
          ><a-button @click="close" style="width: 80px; height: 30px; font-size: 14px">返回</a-button></a-col
        >
        <a-col :span="8" align="center"
          ><a-button
            type="primary"
            @click="handleOk"
            style="width: 80px; height: 30px; font-size: 14px"
            :style="confirmLoading ? 'background-color: #999;border: none;' : ''"
            >{{ type == 1 ? '延期' : '注销' }}</a-button
          ></a-col
        >
        <a-col :span="4"
          ><a-button v-show="false" @click="close" style="width: 80px; height: 30px; font-size: 14px"
            >返回</a-button
          ></a-col
        >
      </a-row>
    </div>
  </a-modal>
</template>


<script>
import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import ListParkNumberPopover from '@views/parking/parkmonthly/components/ListParkNumberPopover'

let postponeList = [],
  i = 0
while (i < 24) {
  i++
  if (i <= 12) {
    postponeList.push({
      value: i,
      label: i,
    })
  } else if (i == 24) {
    postponeList.push({
      value: i,
      label: i,
    })
  }
}
export default {
  name: 'MonthlyCarOwnerModal',
  components: {
    ListParkNumberPopover,
  },
  data() {
    return {
      startValue: null,
      endValue: null,
      endOpen: false,
      title: '操作',
      type: 1, // 1延期 2注销
      visible: false,
      model: {},
      postponeList: postponeList,
      labelCol: {
        xs: { span: 8 },
        sm: { span: 6 },
        style: { textAlign: 'right' },
      },
      wrapperCol: {
        xs: { span: 14 },
        sm: { span: 14 },
        style: { textAlign: 'left' },
      },
      result: {},
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      iSdisabledDate: true,
      url: {
        add: '/com.parking/monthlyCarOwner/add',
        edit: '/com.parking/monthlyCarOwner/edit',
        getPackageInfo: '/monthlyPackageInfo/queryById',
        updateMonthlyCardDelay: '/monthlyCardInfo/updateMonthlyCardDelay',
        getMonthlyCardConcel: '/monthlyCardInfo/getMonthlyCardConcel',
      },
      // 1、正常 2、报停 3、注销 4、过期
      monthlyStatusText: ['未知', '正常', '报停', '注销', '过期'],
      params: {
        endTime: undefined,
        monthlyMoney: undefined,
        beginTime: undefined,
        monthly: 1,
      },
      arabiNumerals: ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],

      //月租状态颜色
      monthlyStatusColor: '#4b7902',
    }
  },
  created() {},
  mounted() {},
  methods: {
    checkBeginTime(rule, value, callback) {
      var startTime = moment(value).format('YYYY-MM-DD HH:mm:ss')
      console.log(startTime, '开始时间')
      console.log(this.result.endTime, '上一次结束时间')
      let reg = new RegExp('-', 'g')
      if (new Date(startTime.replace(reg, '/')) < new Date(this.result.endTime.replace(reg, '/'))) {
        console.log('条件成立')
        callback('起始时间不能早于上一次结束时间!')
      } else {
        callback()
      }
    },

    monthlyStatusTranslate(monthlyStatus) {
      // 1、正常 2、报停 3、注销 4、过期
      if (monthlyStatus === 3) {
        return '注销'
      }
      if (monthlyStatus === 2) {
        return '报停'
      }
      if (new Date() > new Date(this.result.endTime)) {
        this.monthlyStatusColor = 'red'
        return '过期'
      } else {
        this.monthlyStatusColor = '#4b7902'
        return '正常'
      }
    },
    disabledStartDate(startValue) {
      const endValue = this.form.getFieldValue('endTime'),
        beginTime = moment(this.params.beginTime, 'YYYY-MM-DD')
      if (!startValue || !endValue) {
        return false
      }
      // new Date().getTime() - 86400000
      return startValue.valueOf() < beginTime.valueOf() || startValue.valueOf() + 86400000 > endValue.valueOf()
    },
    disabledEndDate(endValue) {
      const startValue = moment(this.params.beginTime, 'YYYY-MM-DD') //this.form.getFieldValue('beginTime')
      if (!endValue || !startValue) {
        return false
      }
      // startValue.valueOf() + 63072000000 <= endValue.valueOf() 限制 起始时间---到期时间 范围两年
      return (
        startValue.valueOf() + 63072800000 <= endValue.valueOf() ||
        startValue.valueOf() - 86400000 >= endValue.valueOf()
      )
    },
    handleStartOpenChange(open) {
      // if (!open) {
      //   this.endOpen = true
      // }
    },
    handleEndOpenChange(open) {
      this.endOpen = open
    },
    // 获取当前月的天数
    mGetDate(year, month) {
      var d = new Date(year, month, 0)
      return d.getDate()
    },
    // 格式化日期
    dateFormat: function (fmt, date) {
      let ret
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString(), // 秒
      }
      for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0'))
        }
      }
      return fmt
    },
    moment,
    add() {
      this.edit({})
    },
    /**
     * 判断变量是否为空，
     * @param  {[type]}  param 变量
     * @return {Boolean}      为空返回true，否则返回false。
     */
    isEmpty(param) {
      if (param) {
        var param_type = typeof param
        if (param_type == 'object') {
          //要判断的是【对象】或【数组】或【null】等
          if (typeof param.length == 'undefined') {
            if (JSON.stringify(param) == '{}') {
              return true //空值，空对象
            }
          } else if (param.length == 0) {
            return true //空值，空数组
          }
        } else if (param_type == 'string') {
          //如果要过滤空格等字符
          var new_param = param.trim()
          if (new_param.length == 0) {
            //空值，例如:带有空格的字符串" "。
            return true
          }
        } else if (param_type == 'boolean') {
          if (!param) {
            return true
          }
        } else if (param_type == 'number') {
          if (!param) {
            return true
          }
        }
        return false //非空值
      } else {
        //空值,例如：
        //(1)null
        //(2)可能使用了js的内置的名称，例如：var name=[],这个打印类型是字符串类型。
        //(3)空字符串''、""。
        //(4)数字0、00等，如果可以只输入0，则需要另外判断。
        return true
      }
    },
    /**
     * 计算两个日期之间的天数
     * @param dateString1  开始日期 yyyy-MM-dd
     * @param dateString2  结束日期 yyyy-MM-dd
     * @returns {number} 如果日期相同 返回一天 开始日期大于结束日期，返回0
     */
    getDaysBetween(dateString1, dateString2) {
      var startDate = Date.parse(dateString1)
      var endDate = Date.parse(dateString2) + 86400000
      if (startDate > endDate) {
        return 0
      }
      if (startDate == endDate) {
        return 1
      }
      var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000)
      return days
    },
    // 选择开始日期
    beginTimeTimeChange(value) {
      if (!this.iSdisabledDate) {
        if (
          this.form.getFieldValue('endTime') !== undefined &&
          this.form.getFieldValue('endTime') !== null &&
          this.form.getFieldValue('endTime') !== '' &&
          value !== undefined &&
          (value !== null) & (value !== '')
        ) {
          if (moment(value).format('YYYY-MM-DD') > moment(this.form.getFieldValue('endTime')).format('YYYY-MM-DD')) {
            this.$message.warning('起始时间不能大于到期时间')
            this.$nextTick(() => {
              this.form.setFieldsValue({ beginTime: '' })
              this.form.setFieldsValue({ monthlyMoney: '' })
            })
            return
          }
        }
      }
      // this.params.beginTime = value.format('YYYY-MM-DD')
      //如果延期按天/月switch开关打开，每当选择开始时间时，结束时间等于起始时间加上选择的延期天数
      if (this.iSdisabledDate) {
        if (this.result.cycleLength === 1) {
          let beginDate = new Date(value)
          var diffDate = this.params.monthly * (1000 * 60 * 60 * 24) - 1
          var endDate = moment(new Date(beginDate.getTime() + diffDate)).format('YYYY-MM-DD')
          this.form.setFieldsValue({ endTime: endDate })
        }
        if (this.result.cycleLength === 2) {
          this.postponeMonthly(this.params.monthly, undefined, value)
        }
      }
    },
    // 选择结束日期计算金额
    endTimeChange(value) {
      if (
        this.form.getFieldValue('beginTime') !== undefined &&
        this.form.getFieldValue('beginTime') !== null &&
        this.form.getFieldValue('beginTime') !== '' &&
        value !== undefined &&
        (value !== null) & (value !== '')
      )
        if (moment(this.form.getFieldValue('beginTime')).format('YYYY-MM-DD') > moment(value).format('YYYY-MM-DD')) {
          this.$message.warning('到期时间不能小于起始时间')
          this.$nextTick(() => {
            this.form.setFieldsValue({ endTime: '' })
            this.form.setFieldsValue({ monthlyMoney: '' })
          })
          return
        }
      let _self = this
      this.form.setFieldsValue({ monthlyMoney: '' })
      if (!_self.isEmpty(value) && typeof value != 'string') {
        if (_self.result.cycleLength == 1) {
          // 周期按天
          _self.postponeMonthly(
            _self.getDaysBetween(
              moment(this.params.beginTime, 'YYYY-MM-DD').format('YYYY-MM-DD'),
              value.format('YYYY-MM-DD')
            )
          )
          return
        }
        // 周期按月
        let beginTime = this.form.getFieldValue('beginTime'), //moment(this.params.beginTime, 'YYYY-MM-DD'),
          yearDiffer = value.format('YYYY') - beginTime.format('YYYY'),
          beginTimeYear = beginTime.format('YYYY'),
          beginTimeMonth = beginTime.format('M'),
          beginTimeDate = beginTime.format('DD'),
          endTimeYear = value.format('YYYY'),
          endTimeMonth = value.format('M'),
          endTimeDate = value.format('DD'),
          endTimeBeginTimeMonthDiffer = undefined

        if (beginTimeYear == endTimeYear) {
          endTimeBeginTimeMonthDiffer = parseInt(endTimeMonth) - parseInt(beginTimeMonth)
        } else if (beginTimeYear != endTimeYear) {
          endTimeBeginTimeMonthDiffer = Math.abs(beginTimeMonth - 12) + (yearDiffer - 1) * 12 + parseInt(endTimeMonth)
        }
        judgmentInDate()
        // 是否相同月份
        function judgmentInMonth() {
          if (beginTimeMonth == endTimeMonth) {
            console.log('相同月份')
            return true
          }
          return false
        }
        // 是否相同天
        function judgmentInDate() {
          if (beginTimeDate == endTimeDate) {
            console.log('---相同天数---')
            return
          } else {
            let monthDateDiffer = Math.abs(
              _self.mGetDate(endTimeYear, endTimeMonth) - _self.mGetDate(beginTimeYear, beginTimeMonth)
            )
            console.log(
              '---天数不相同---',
              +endTimeDate,
              beginTimeDate,
              monthDateDiffer,
              beginTimeDate - endTimeDate,
              monthDateDiffer
            )
            if (
              _self.mGetDate(beginTimeYear, beginTimeMonth) > _self.mGetDate(endTimeYear, endTimeMonth) &&
              beginTimeDate > endTimeDate &&
              beginTimeDate - endTimeDate <= monthDateDiffer &&
              endTimeDate == _self.mGetDate(endTimeYear, endTimeMonth)
            ) {
            } else if (+beginTimeDate - 1 == 0) {
              ++endTimeBeginTimeMonthDiffer
              if (_self.mGetDate(endTimeYear, endTimeMonth) != endTimeDate) {
                return
              }
            } else if (+beginTimeDate - 1 != endTimeDate) {
              return
            }
          }
          console.log(Math.abs(endTimeBeginTimeMonthDiffer))
          _self.postponeMonthly(endTimeBeginTimeMonthDiffer)
        }
      }
    },
    //
    postponeMonthly(value, e, selectedBeginTime) {
      let date
      if (selectedBeginTime !== undefined && selectedBeginTime !== null && selectedBeginTime !== '') {
        date = new Date(selectedBeginTime)
      } else {
        date = new Date(this.form.getFieldValue('beginTime'))
      }
      // let date = new Date(this.params.beginTime)
      this.params.endTime = moment(this.countEndTime(date, value), 'YYYY-MM-DD')
      this.params.monthly = value
      this.form.setFieldsValue({
        monthlyMoney: parseInt(this.result.monthlyMoney) * parseInt(value),
        endTime: this.params.endTime,
      })
    },
    // 计算结束时间
    countEndTime(date, value = 1) {
      let endTime = undefined

      if (this.result.cycleLength == 1) {
        // 周期按天
        endTime = new Date(date.setDate(date.getDate() + value - 1))
      } else {
        // 周期按月
        let dateTimeYear = +this.dateFormat('Y', date),
          dataTimeMonth = +this.dateFormat('m', date),
          dataTimeDate = +this.dateFormat('d', date),
          yearDiffer = parseInt(dataTimeMonth / 12) + parseInt(value / 12),
          endTimeYearDiffer = dateTimeYear + yearDiffer,
          endTimeMonth = (dataTimeMonth == 12 ? 0 : dataTimeMonth) + (value % 12 ? value % 12 : dataTimeMonth),
          month = new Date(date.setMonth(date.getMonth() + value)),
          monthDateDiffer = Math.abs(
            this.mGetDate(dateTimeYear, dataTimeMonth) - this.mGetDate(endTimeYearDiffer, endTimeMonth)
          )

        endTime = new Date(month.setDate(date.getDate()) - 1)
        if (this.mGetDate(dateTimeYear, dataTimeMonth) != this.mGetDate(endTimeYearDiffer, endTimeMonth)) {
          // 起始日期总天数!=结束日期总天数
          if (
            this.mGetDate(dateTimeYear, dataTimeMonth) > this.mGetDate(endTimeYearDiffer, endTimeMonth) &&
            this.mGetDate(dateTimeYear, dataTimeMonth) - dataTimeDate < monthDateDiffer
          ) {
            endTime = new Date(
              `${endTimeYearDiffer}-${endTimeMonth}-${this.mGetDate(endTimeYearDiffer, endTimeMonth)} 0:0:0`
            )
          }
        }
      }
      return endTime
    },
    edit(record) {
      let _self = this
      this.iSdisabledDate = true
      getAction(this.url.getPackageInfo, { id: record.packageId }).then((res) => {
        record.overdueDelayWay = res.result.overdueDelayWay // 1 顺延 2 跳延
        record.monthlyCardId = res.result.id
        record.monthlyMoney = parseInt(res.result.charges) / 100
        // record.bindingCarNumber = _self.arabiNumerals[res.result.bindingCarNumber]
        // record.bindingSpaceNumber = _self.arabiNumerals[res.result.bindingSpaceNumber]
        record.bindingCarNumber = res.result.bindingCarNumber
        record.bindingSpaceNumber = res.result.bindingSpaceNumber
        record.cycleLength = res.result.cycleLength // 1 按天 2 按月
        ;(record.plateNoMore = ''), (record.parkNumberMore = '')
        if (record.plateNo.split(',').length > 3) {
          record.plateNoMore = record.plateNo.split(',')
          record.plateNoNow = `${record.plateNo.split(',')[0]},${record.plateNo.split(',')[1]},${
            record.plateNo.split(',')[2]
          }`
        } else {
          record.plateNoNow = record.plateNo
        }
        if (record.parkNumber.split(',').length > 3) {
          record.parkNumberMore = record.parkNumber.split(',')
          record.parkNumberNow = `${record.parkNumber.split(',')[0]},${record.parkNumber.split(',')[1]},${
            record.parkNumber.split(',')[2]
          }`
        } else {
          record.parkNumberNow = record.parkNumber
        }
        Object.assign(_self.result, record)

        console.log(new Date(record.endTime))
        let date = new Date(record.endTime)
        _self.params.beginTime = this.dateFormat('Y-m-d H:M:S', new Date(date.setSeconds(date.getSeconds() + 1)))
        _self.params.endTime = this.dateFormat('Y-m-d', _self.countEndTime(date))
        _self.visible = true
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.params.monthly = 1
      this.form.resetFields()
    },
    onChange(value) {
      this.iSdisabledDate = !this.iSdisabledDate
      this.form.setFieldsValue({
        beginTime: moment(this.params.beginTime, 'YYYY-MM-DD'),
      })
      if (!value) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            endTime: '',
          })
          this.form.setFieldsValue({
            monthlyMoney: '',
          })
        })
      }
      this.postponeMonthly(1)
    },
    //指定日期之前的不可选择
    disabledDate(current) {
      return this.iSdisabledDate
    },
    handleOk() {
      const that = this
      
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          this.model = {}
          let formData, hint, httpurl, method
          formData = Object.assign(this.model, values)
          method = 'post'
          if (that.type == 1) {
            httpurl = that.url.updateMonthlyCardDelay
            formData.parkName = that.result.parkName
            formData.monthlyCardId = that.result.id
            formData.parkCode = that.result.parkCode
            //时间格式化
            formData.beginTime = `${formData.beginTime ? formData.beginTime.format('YYYY-MM-DD') : null}` + ' 00:00:00'
            formData.endTime = `${formData.endTime ? formData.endTime.format('YYYY-MM-DD') : null}` + ' 23:59:59'
            hint = `您确定要延期本月租，截止时间至 ${formData.endTime},收费 ${formData.monthlyMoney}元吗？`
            //如果是跳延且未过期，按顺延处理，其实时间还是原来的时间，截止时间是选择的时间
            if (
              this.result.overdueDelayWay === 2 &&
              this.result.endTime > moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
            ) {
              formData.beginTime = this.result.beginTime
            }
          } else if (that.type == 2) {
            httpurl = that.url.getMonthlyCardConcel
            formData.id = that.result.id
            hint = `若当前车辆在场，本次停车将按全程计费，您确定要注销本月租信息吗？`
          }
      if(that.confirmLoading){;return;}
          that.$confirm({
            title: '系统提示',
            content: (h) => <div>{hint}</div>,
            onOk() {
              console.log('OK')
              that.confirmLoading = true
              console.log(that.confirmLoading)

              httpAction(httpurl, formData, method)
                .then((res) => {
                  if (res.success) {
                    that.$message.success(res.message)
                    that.$emit('ok')
                  } else {
                    that.$message.warning(res.message)
                  }
                })
                .finally(() => {
                  that.confirmLoading = false
                  that.close()
                })
            },
            onCancel() {
              console.log('Cancel')
            },
            class: 'test',
          })
        }
      })
    },
    handleCancel() {
      this.close()
      this.params.monthly = 1
    },
  },
}
</script>

<style lang="less" scoped>
.itemLabel::after {
  content: ':';
  position: relative;
  top: -0.5px;
  margin: 0 8px 0 2px;
  box-sizing: border-box;
}
.container {
  font-size: 15px;
  padding: 0 40px 40px;
  color: #333;
  .top {
    * {
      margin-top: 20px;
    }
  }
  p {
    padding: 0;
    margin: 0;
    span {
      font-weight: 600;
    }
  }
  ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    li {
      margin-top: 5px;
      width: 33%;
      list-style: none;
      span {
        font-weight: 600;
      }
    }
  }

  .detailBottom {
    // white-space: nowrap;
    // text-overflow: ellipsis;
    // overflow: hidden;

    width: 68%;
    li {
      width: 50%;
    }
  }

  h3 {
    text-align: center;
  }
  .explain {
    margin-left: 11.5%;
    width: 80%;
    display: block;
    font-size: 13px;
    color: #999;
  }
}
</style>
